<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Aplicantes</title>

<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/gen-style.css"
	type="text/css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/mkv/jquery-ui.css"
	type="text/css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/makovo-style.css"
	type="text/css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/aprecia.css" type="text/css" />

<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/jquery-2.1.3.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/gen.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/jquery.ba-throttle-debounce.min.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/jquery.stickyheader.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/inegi.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/spin.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/auxiliares.js"></script>
<script type="text/javascript">
	$(document).ready(
			function() {
				// 				if (validaSesion("${sessionScope.LoginMenu}"))
				// 					document.location = "index.jsp";
				var mA = new Gen.AjaxCall();
				var mApproved = null;
				var mRelatedCurp = null;
				var mPageSize = 50;
				var mTotal = 100;

				var mCurrentFilter = {
					"curp" : null,
					"state" : -1,
					"city" : -1,
					"step" : -1,
					"page" : 0,
					"change" : 1
				}

				$('#filter').click(function() {
					mCurrentFilter.curp = $('#curp').val();
					mCurrentFilter.step = $('#step').val();
					mCurrentFilter.state = $('#state').val();
					mCurrentFilter.city = $('#city').val();
					mCurrentFilter.page = 0;
					mCurrentFilter.change = 1;

					getApplicants(mCurrentFilter);
					mCurrentFilter.change = 0;
				});

				$('#state').change(function() {
					var stateId = $(this).val();
					var state = findValue(Inegi.states, 'id', stateId);

					if (stateId != -1)
						Inegi.fillCities($('#city'), stateId, true);
					else {
						$('#city').find('option').remove();
						$('#city').append($('<option value="-1">... Seleccione una opción ...</option>'));
					}
				});

				$('#prev').click(function() {
					if (mCurrentFilter.page <= 0)
						return;

					mCurrentFilter.curp = $('#curp').val();
					mCurrentFilter.step = $('#step').val();
					mCurrentFilter.state = $('#state').val();
					mCurrentFilter.city = $('#city').val();
					mCurrentFilter.page = mCurrentFilter.page - 1;
					mCurrentFilter.change = 0;

					getApplicants(mCurrentFilter);
				});

				$('#next').click(function() {
					if (((mCurrentFilter.page + 1) * mPageSize) >= mTotal)
						return;

					mCurrentFilter.curp = $('#curp').val();
					mCurrentFilter.step = $('#step').val();
					mCurrentFilter.state = $('#state').val();
					mCurrentFilter.city = $('#city').val();
					mCurrentFilter.page = mCurrentFilter.page + 1;
					mCurrentFilter.change = 0;

					getApplicants(mCurrentFilter);
				});

				$('#change').dialog({
					autoOpen : false,
					modal : true,
					width : 500,
					height : 350,
					open : function(event, ui) {

					},
					close : function(event, ui) {
						$('#change_action').text("");
						$('#change_obs_container').hide();
						$('#change_obs').text("");
						mApproved = null;
					},
					buttons : [ {
						text : "Aceptar",
						click : function() {
							showOverlay(true);
							if (mApproved == null || mRelatedCurp == null)
								return;

							if (mApproved) {
								mA.post("ajax/ApreciaApprove", {
									id : mRelatedCurp
								}, function(h) {
									$('#change').dialog('close');
									$('#' + mRelatedCurp).find('td').addClass('approved');
									$('#' + mRelatedCurp).find('button').not('.goTemp').attr('disabled', 'disabled');
									hideOverlay();
								}, function(e) {
								});
							} else {
								var comments = $('#change_obs').val();
								mA.post("ajax/AppreciaReject", {
									id : mRelatedCurp,
									rej : comments
								}, function(h) {
									$('#change').dialog('close');
									$('#' + mRelatedCurp).find('td').addClass('rejected');
									$('#' + mRelatedCurp).find('button').not('.goTemp').attr('disabled', 'disabled');
									hideOverlay();
								}, function(e) {
								});
							}
						}
					} ]
				});

				function getApplicants(filter) {
					showOverlay(true);
					mA.post("ajax/GetApplicantList", {
						id : filter.curp,
						step : filter.step,
						state : filter.state,
						city : filter.city,
						page : filter.page,
						change : filter.change
					}, function(r) {
						addApplicants(r.applicants);
						setHeader(r);
					}, function(er) {
					});
				}

				function addApplicants(applicants) {
					var current;
					var acum = "";

					$('#tblNotifs tbody tr').not(':first').remove();
					$('#tblNotifs tbody td').not('.detTemp').html("");

					for (var i = 0; i < applicants.length; i++) {
						current = $('.contTemp', $('#tblNotifs')).clone().css('display', '');

						current.children().attr('id', applicants[i].curp);
						current.find('td').removeClass('rejected').removeClass('approved');

						current.find('.approve').removeAttr('disabled');
						current.find('.reject').removeAttr('disabled');

						if (applicants[i].appStep == 102)
							current.find('td').addClass('approved');
						else if (applicants[i].appStep == 103)
							current.find('td').addClass('rejected');

						current.find('.appTemp').append($("<span>" + applicants[i].curp + "</span>"));
						current.find('.nameTemp').text(
								applicants[i].name + " " + applicants[i].lastName + " " + applicants[i].secondLastName);
						current.find('.stateTemp').text(applicants[i].address.state);
						current.find('.cityTemp').text(applicants[i].address.city);
						current.find('.goTemp').attr('id', "app_" + applicants[i].curp);
						current.find('.approve').attr('id', "approve_" + applicants[i].curp);
						current.find('.reject').attr('id', "reject_" + applicants[i].curp);

						if (applicants[i].appStep > 101) {
							current.find('.approve').attr('disabled', "disabled");
							current.find('.reject').attr('disabled', "disabled");
						}

						acum += current.html();
					}

					$('#tblNotifs tbody').append(acum);
					$('.goTemp', $('#tblNotifs')).click(function(e) {
						navigate(this.id.split('_')[1]);
					});

					$('.approve', $('#tblNotifs')).click(
							function(e) {
								mApproved = true;
								mRelatedCurp = this.id.split('_')[1];

								$('#change_action').append(
										"¿Esta seguro que desea <b>APROBAR</b> al aplicante con curp {0}?".format(mRelatedCurp));

								$('#change').dialog('open');
							});

					$('.reject', $('#tblNotifs'))
							.click(
									function(e) {
										mApproved = false;
										mRelatedCurp = this.id.split('_')[1];

										$('#change_action').append(
												"¿Esta seguro que desea <b>RECHAZAR</b> al aplicante con curp {0}?"
														.format(mRelatedCurp));

										$('#change_obs_container').show();

										$('#change').dialog('open');
									});

					if ($('#tblNotifs tbody tr').size() > 1)
						$('#tblNotifs tbody tr:first').remove();

					hideOverlay();
				}

				function setHeader(p) {

					var end = p.pageSize * (mCurrentFilter.page + 1);

					mTotal = p.total;
					mPageSize = p.pageSize;

					if (end > mTotal)
						end = mTotal;

					$('#num-end').text(end);
					$('#num-init').text(p.pageSize * mCurrentFilter.page);
					$('#num-total').text(p.total);

					window.scrollTo(0, 0)
				}

				function navigate(id) {
					mA.post("ajax/Navigate", {
						id : id
					}, function(h) {
						if (h != null)
							window.location = h.newLoc;
					}, function(e) {
					});
				}

				Inegi.fillStates($('#state'));
				getApplicants(mCurrentFilter);

			});
</script>
</head>
<body>
	<div style="width: 1100px; margin: 0 auto">
		<form action="ajax/GetUser">
			<div class="headerMK">
				<div class="logo">
					<span class="hdTitulo">Sistema para Aplicación de Subsidio
						2015</span>
				</div>
				<div
					style="font-size: 0.26em; top: -50px; position: relative; width: 500px; float: right; text-align: right; padding-right: 10px">
					<i>${sessionScope.LoginNombre}</i><b><a
						href="/makovo/paginas/index.jsp"> - Cerrar Sesión</a></b>
				</div>
			</div>
		</form>
		<form action="ajax/GetApplicants">
			<div class="divContenido">
				<a href="<%=request.getContextPath()%>/paginas/menu.jsp">Regresar
					al menú</a> <br />
				<h3>Listado de Aplicantes</h3>
				<div style="padding-left: 50px">
					<table style="width: 100%">
						<tr>
							<td><input type="text" placeholder="CURP" class="t-box"
								t-box-type="user" id="curp"></td>
							<td><select class="t-box" id="state"></select></td>
							<td><select class="t-box" id="city">
									<option value="-1">.. Seleccione una opción ..</option>
							</select></td>
							<td><select class="t-box" id="step">
									<option value="-1">.. Seleccione una opción ..</option>
									<option value="102">Aprobado</option>
									<option value="103">Rechazado</option>
							</select></td>
							<td style="width: 20%"><button type="button" id="filter"
									class="t-btn tiny hor-opening">Filtrar</button></td>

						</tr>
					</table>
				</div>

				<div style="width: 1050px; margin: 0px auto; padding: 1em;">
					<div style="float: right;">
						<span>Se muestran registros </span> <span id="num-init">0</span> <span>a</span>
						<span id="num-end"></span> <span>de</span> <span id="num-total"></span>
					</div>
					<br> <br>
					<table id="tblNotifs">
						<thead>
							<tr>
								<th><span>CURP</span></th>
								<th><span>Nombre</span></th>
								<th><span>Estado</span></th>
								<th><span>Municipio</span></th>
								<th><span></span></th>
								<th><span></span></th>
							</tr>
						</thead>
						<tbody class="contTemp">
							<tr class="temp">
								<td class="appTemp" style="width: 170px"></td>
								<td class="nameTemp" style="width: 220px"></td>
								<td class="stateTemp" style="width: 170px"></td>
								<td class="cityTemp" style="width: 170px"></td>
								<td class="detTemp"><button
										class="t-btn tiny change goTemp" type="button">Detalles</button></td>
								<td class="detTemp"><button
										class="t-btn tiny change approve" style="float: left;"
										type="button">Aprobar</button>
									<button class="t-btn tiny change reject" type="button">Rechazar</button></td>
							</tr>

						</tbody>
					</table>
					<br> <br>
					<div>
						<button type="button" style="float: left;" id="prev"
							class="t-btn tiny hor-opening">Página anterior</button>
						<button type="button" style="float: right;" id="next"
							class="t-btn tiny hor-opening">Página siguiente</button>
					</div>
					<br> <br> <br>
				</div>
			</div>

			<div id="change">
				<span id="change_action"></span><br /> <br />
				<div style="width: 100%; text-align: center; display: none;"
					id="change_obs_container">
					<span>Por favor adjunte las observaciones relacionadas: </span><br />
					<textarea rows="5" cols="40" id="change_obs"
						style="resize: none; margin: 0px auto;" maxlength="500"></textarea>
				</div>

			</div>
		</form>
	</div>
</body>
</html>